<template>
    <view class="">
        <view :class="[elId]" :style="{
			height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto',
			textIndent: textIndent
		}" class="u-content">
            <slot></slot>
        </view>
        <view v-if="isLongContent" :class="{ 'u-content__show-more': showMore }" :style="[innerShadowStyle]"
              class="u-content__showmore-wrap"
              @tap="toggleReadMore">
            <text :style="{
				fontSize: fontSize + 'rpx',
				color: color
			}" class="u-content__showmore-wrap__readmore-btn">
                {{ showMore ? openText : closeText }}
            </text>
            <view class="u-content__showmore-wrap__readmore-btn__icon u-flex">
                <u-icon :color="color" :name="showMore ? 'arrow-up' : 'arrow-down'" :size="fontSize"></u-icon>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * readMore 阅读更多
 * @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
 * @tutorial https://www.uviewui.com/components/readMore.html
 * @property {String Number} show-height 内容超出此高度才会显示展开全文按钮，单位rpx（默认400）
 * @property {Boolean} toggle 展开后是否显示收起按钮（默认false）
 * @property {String} close-text 关闭时的提示文字（默认“展开阅读全文”）
 * @property {String Number} font-size 提示文字的大小，单位rpx（默认28）
 * @property {String} text-indent 段落首行缩进的字符个数（默认2em）
 * @property {String} open-text 展开时的提示文字（默认“收起”）
 * @property {String} color 提示文字的颜色（默认#2979ff）
 * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
 */
export default {
    name: "u-read-more",
    props: {
        // 默认的显示占位高度，单位为rpx
        showHeight: {
            type: [Number, String],
            default: 400
        },
        // 展开后是否显示"收起"按钮
        toggle: {
            type: Boolean,
            default: false
        },
        // 关闭时的提示文字
        closeText: {
            type: String,
            default: '展开阅读全文'
        },
        // 展开时的提示文字
        openText: {
            type: String,
            default: '收起'
        },
        // 提示的文字颜色
        color: {
            type: String,
            default: '#2979ff'
        },
        // 提示文字的大小
        fontSize: {
            type: [String, Number],
            default: 28
        },
        // 是否显示阴影
        shadowStyle: {
            type: Object,
            default() {
                return {
                    backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
                    paddingTop: "300rpx",
                    marginTop: "-300rpx"
                }
            }
        },
        // 段落首行缩进的字符个数
        textIndent: {
            type: String,
            default: '2em'
        },
        // open和close事件时，将此参数返回在回调参数中
        index: {
            type: [Number, String],
            default: ''
        }
    },
    watch: {
        paramsChange(val) {
            this.init();
        }
    },
    computed: {
        paramsChange() {
            return `${this.toggle}-${this.showHeight}`;
        },
        // 展开后无需阴影，收起时才需要阴影样式
        innerShadowStyle() {
            if (this.showMore) return {};
            else return this.shadowStyle
        }
    },
    data() {
        return {
            isLongContent: false, // 是否需要隐藏一部分内容
            showMore: false, // 当前隐藏与显示的状态，true-显示，false-收起
            elId: this.$u.guid(), // 生成唯一class
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.init();
        })
    },
    methods: {
        init() {
            this.$uGetRect('.' + this.elId).then(res => {
                // 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
                if (res.height > uni.upx2px(this.showHeight)) {
                    this.isLongContent = true;
                    this.showMore = false;
                }
            })
        },
        // 展开或者收起
        toggleReadMore() {
            this.showMore = !this.showMore;
            // 如果toggle为false，隐藏"收起"部分的内容
            if (this.toggle == false) this.isLongContent = false;
            // 发出打开或者收齐的事件
            this.$emit(this.showMore ? 'open' : 'close', this.index);
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";

.u-content {
    font-size: 30 rpx;
    color: $u-content-color;
    line-height: 1.8;
    text-align: left;
    overflow: hidden;

    &__show-more {
        padding-top: 0;
        background: none;
        margin-top: 20 rpx;
    }

    &__showmore-wrap {
        position: relative;
        width: 100%;
        padding-bottom: 26 rpx;
        @include vue-flex;
        align-items: center;
        justify-content: center;

        &__readmore-btn {
            @include vue-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;

            &__icon {
                margin-left: 14 rpx;
            }
        }
    }
}
</style>
